<template>
  <div class="aes-products">
    <!-- 美学产品页面 -->
    <div class="center">
      <!-- 头部导航栏 -->
      <div class="header_box">
        <div class="logo">
          <router-link to="/">
            <img src="../assets/logo-white.png" alt="" />
          </router-link>
          
        </div>
        <div class="nav_content" v-for="(obj, index) in arr" :key="index">
          <router-link class="router" :to="obj.path">
            <span
              :class="{ active: index === findIndex }"
              @click="btn(index)"
              >{{ obj.first_name }}</span
            ></router-link
          >
        </div>
      </div>
      
      <!-- 默认页面组件 -->
      <zm-products/>
      <div class="contents">
        <div class="content">
          <!--指定组件的位置-->
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ZmProducts from '@/components/ZmProducts.vue';
export default {
  components: { ZmProducts },
  data() {
    return {
      arr: [
        {
          path: "/aesgaizao",
          first_id: "0",
          first_name: "精装改造",
        },
        {
          path: "/aesjiaju",
          first_id: "1",
          first_name: "家具",
        },
        {
          path: "/aeschuanglian",
          first_id: "2",
          first_name: "窗帘",
        },
        {
          path: "/aesdengju",
          first_id: "3",
          first_name: "灯具",
        },
        {
          path: "/aesruanshi",
          first_id: "4",
          first_name: "软饰",
        },
      ],
      findIndex: 0,
    };
  },
  methods: {
    btn(index) {
      this.findIndex = index;
    },
  },
};
</script>
<style lang="css" scoped>
.nav_content .active {
  color: #dead75;
}
</style>
<style lang="scss" src="../assets/css/aes_products.scss"></style>


